<!--  -->
<template>
  <div class="showDataPanel">
    <date-switching-component @getData="getData"/>
    <el-table class="tableView" :expand-row-keys="expands" :row-key="getRowKeys" :data="dataList"
              @expand-change="expandColumn">
      <el-table-column type="expand" align="center" min-width="40">
        <template #default="props">
          <div class="tableColumnView">
            <historical-data-echarts-panel ref="DailyDosageStatisicsBar"  class="echartsView"/>
            <el-table :data="props.row.dataList">
              <el-table-column label="采集时间" width="90" prop="dataTime"/>
              <el-table-column label="瞬时流量" width="90" align="center" v-if="showColumn.instantaneousFlow">
                <template #default="scope">
                  {{ scope.row.instantaneousFlow }} {{ scope.row.instantaneousFlowUnit }}
                </template>
              </el-table-column>
              <el-table-column label="累计流量" align="center" v-if="showColumn.accumulatedFlow||showColumn.accumulatedFlowConsumption">
                <el-table-column prop="accumulatedFlow" v-if="showColumn.accumulatedFlow" label="累计流量" align="center" width="90"/>
                <el-table-column prop="CumulativeFlowUnit" label="单位" v-if="showColumn.accumulatedFlow||showColumn.accumulatedFlowConsumption" align="center" width="90"/>
                <el-table-column prop="accumulatedFlowConsumption" v-if="showColumn.accumulatedFlowConsumption" label="使用量" align="center" width="90"/>
              </el-table-column>
              <el-table-column :label="'正累计\n流量'" v-if="showColumn.positiveAccumulatedFlow" align="center" width="90">
                <template #default="scope">
                  {{ scope.row.positiveAccumulatedFlow }} {{ scope.row.positiveCumulativeFlowUnit }}
                </template>
              </el-table-column>
              <el-table-column :label="'负累计\n流量'" v-if="showColumn.negativeAccumulatedFlow"  align="center" width="90">
                <template #default="scope">
                  {{ scope.row.negativeAccumulatedFlow }} {{ scope.row.negativeCumulativeFlowUnit }}
                </template>
              </el-table-column>
              <el-table-column prop="temperature" v-if="showColumn.temperature"  :label="'温度\n℃'" align="center" width="90"/>
              <el-table-column prop="pressure" v-if="showColumn.pressure"  :label="'压力\nMPa'" align="center" width="90"/>
              <el-table-column prop="frequency" v-if="showColumn.frequency"  :label="'频率\nHz'" align="center" width="90"/>
              <el-table-column prop="pressureDelta" v-if="showColumn.pressureDelta"  :label="'压差\nKPa'" align="center" width="90"/>
              <el-table-column prop="density" v-if="showColumn.density"  :label="'密度kg\n/m³'" align="center" width="90"/>
            </el-table>
          </div>
        </template>
        <template #header>
          <el-popover
              placement="bottom"
              trigger="click"
              :visible="visible">
            <transition name="fade">
              <div class="elPopover">
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.instantaneousFlow">瞬时流量</el-checkbox>
                  <el-checkbox v-model="showColumn.accumulatedFlow">累计流量</el-checkbox>
                  <el-checkbox v-model="showColumn.accumulatedFlowConsumption">累计流量使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.positiveAccumulatedFlow">正累计流量</el-checkbox>
                  <el-checkbox v-model="showColumn.negativeAccumulatedFlow">负累计流量</el-checkbox>
                  <el-checkbox v-model="showColumn.temperature"> 温 度 </el-checkbox>
                  <el-checkbox v-model="showColumn.pressure"> 压 力 </el-checkbox>
                  <el-checkbox v-model="showColumn.frequency"> 频 率 </el-checkbox>
                  <el-checkbox v-model="showColumn.density">  密 度 </el-checkbox>
                  <el-checkbox v-model="showColumn.pressureDelta"> 压 差 </el-checkbox>

                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <svg-icon icon-class="set" class="setSvg" @click="visible = true"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="rangeName" label="区域名称" align="center"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
      <el-table-column prop="deviceNo" label="设备编号" align="center"></el-table-column>
      <el-table-column label="瞬时流量" align="center">
        <template #default="scope">
          {{ scope.row.instantaneousFlow }} {{ scope.row.instantaneousFlowUnit }}
        </template>
      </el-table-column>
      <el-table-column label="累计流量" align="center">
        <el-table-column prop="accumulatedFlow" label="累计流量" align="center"></el-table-column>
        <el-table-column prop="accumulatedFlowUnit" label="单位" align="center"></el-table-column>
        <el-table-column prop="accumulatedFlowConsumption" label="使用量" align="center"></el-table-column>
      </el-table-column>
      <el-table-column :label="'正累计\n流量'" align="center">
        <template #default="scope">
          {{ scope.row.positiveAccumulatedFlow }} {{ scope.row.positiveAccumulatedFlowUnit }}
        </template>
      </el-table-column>
      <el-table-column :label="'负累计\n流量'" align="center">
        <template #default="scope">
          {{ scope.row.negativeAccumulatedFlow }} {{ scope.row.negativeAccumulatedFlowUnit }}
        </template>
      </el-table-column>
      <el-table-column prop="temperature" :label="'温度\n℃'" align="center"/>
      <el-table-column prop="pressure" :label="'压力\nMPa'" align="center"/>
      <el-table-column prop="frequency" :label="'频率\nHz'" align="center"/>
      <el-table-column prop="pressureDelta" :label="'压差\nKPa'" align="center"/>
      <el-table-column prop="density" :label="'密度kg\n/m³'" align="center"/>
      <el-table-column prop="power_outage_duration" label="累计停电时间" align="center"/>
      <el-table-column prop="power_outage_count" label="停电次数" align="center"/>
    </el-table>
  </div>
</template>

<script>
import DateSwitchingComponent from "@/components/DateSwitchingComponent.vue";
import {setEchartsData} from '../../../utils/public'
let component;
import moment from 'moment';
import _ from "underscore";
import HistoricalDataEchartsPanel from "@/views/data/components/HistoricalDataEchartsPanel.vue";

export default {
  data() {
    return {
      visible: false,
      showColumn: {
        instantaneousFlow: true,
        accumulatedFlow: true,
        accumulatedFlowConsumption: false,
        positiveAccumulatedFlow: false,
        negativeAccumulatedFlow: false,
        temperature: false,
        pressure: false,
        frequency: false,
        pressureDelta: false,
        density: false
      },
      dataList: [],
      showChartsData:{},
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      },
      expands: [], // 只展开一行放入当前行id
      getRowKeys: (row) => { // 获取当前行id
        return row.deviceNo; // 这里看这一行中需要根据哪个属性值是id
      }
    };
  },
  components: {HistoricalDataEchartsPanel, DateSwitchingComponent},
  methods: {
    expandColumn(row, expandedRows) {
      // 每次只展开一行
      if (expandedRows.length) {
        component.expands = []
        if (row) {
          component.expands.push(row.deviceNo);
          component.showChartsData=row.chart;
          setEchartsData(component);
        }
      } else {
        component.expands = []
      }
    },
    saveColumn() {
      //持久化存储
      localStorage.setItem("historyFlowMeter", JSON.stringify(this.showColumn))
      this.visible = false;
      if(component.expands.length==0) return;
      setEchartsData(component);
    },
    getData(data, type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType = type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
    if (localStorage.getItem("historyFlowMeter")) {
      this.showColumn = JSON.parse(localStorage.getItem("historyFlowMeter"))
    } else {
      this.showColumn = {
        instantaneousFlow: true,
        accumulatedFlow: true,
        accumulatedFlowConsumption: false,
        positiveAccumulatedFlow: false,
        negativeAccumulatedFlow: false,
        temperature: false,
        pressure: false,
        frequency: false,
        pressureDelta: false,
        density: false
      };
    }
  }
}

</script>
<style lang='scss'>
</style>